// ------------------------------- 查询所有学员，循环展示 ------------------------------
function renderStudent() {
    axios.get('/student/list').then(({ data: res }) => {
      let { code, data } = res;
      if (code === 0) {
        let trs = '';
        data.forEach(item => {
          trs += `
          <tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province} ${item.city} ${item.county}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm">修改</button>
              <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
            </td>
          </tr>
          `;
        });
        $('tbody').html(trs);
      }
    });
  }
  renderStudent();

  // ----------------------删除学员-----------------------

  $('tbody').on('click','.del',function(){
    if(!confirm('你确定要删除吗?'))return;
    let id=$(this).data('id');
    axios.delete('/student/delete',{params:{id}}).then(({data:res})=>{
      if(res.code===0){
        toastr.success(res.message);//提示
        renderStudent();//更新页面数据
      }
    })
  })



  // -----------------------省市县联动-----------------------

  //页面加载完毕,马上获取全部的省
  axios.get('/geo/province').then(({data:res})=>{
    let str='<option selected value="">--省--</option>';
    res.forEach(item=>{
      str+=`<option value="${item}">${item}</option>`;
    });
    $('select[name=province]').html(str);
  });


  //省切换的时候,获取对应的市
  $('select[name=province]').on('change',function(){
    // 重置县
  $('select[name=county]').html('<option value="" selected>--县--</option>');
    //获取当前选择的省
    let pname=$(this).val(); // 对于下拉框来说，$('select').val() 找的并不是 select标签的value属性，找的是 option是value属性
    // 判断，如果选择了空的省，重置后面的市和县
  if (pname === '') {
    return $('select[name=city]').html('<option value="" selected>--市--</option>'); // 左右结构，右侧先执行
  }
    //获取对应的市,并展示到对应的下拉框中
    axios.get('/geo/city',{params:{pname}}).then(({data:res})=>{
      let str='<option selected value="">--市--</option>';
      res.forEach(item=>{
        str+=`<option value="${item}">${item}</option>`;
      });
      $('select[name=city]').html(str);
    });
  })


  //市切换的时候,获取对应的县
 $('select[name=city]').on('change',function(){

    //获取当前选择的省 
    let cname=$(this).val();//对于下拉框来说,$('select').val()找到的并不是select标签的value属性 ,找到是option是value属性
    let pname=$(this).parent().prev().children().eq(0).val();

    //判断,如果市是空值,重置后面的县
    if(cname==='') return $('select[name=county]').html('<option selected value="">--县--</option>');
    
    //获取对应的市,并展示到对应的下拉框中
    axios.get('/geo/county',{params:{pname,cname}}).then(({data:res})=>{
      let str='<option selected value="">--县--</option>';
      res.forEach(item=>{
        str+=`<option value="${item}">${item}</option>`;
      });
      $('select[name=county]').html(str);
    });
  })
  // ----------------------添加学员----------------------------
  // 研究一下,弹框是怎么回事,https://v5.bootcss.com/docs/components/modal/
